<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<view class="cu-list menu">
				<view class="text-bold text-black text-center text-lg padding-top padding-bottom line-gray">社保最低缴费基数对比测算</view>
				<view class="cu-item arrow">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">请选择你当前所在的省市</text>
					</view>
					<view class="action">
						<uni-citys :key="cityId" :defaultCity="[-1,-1]" :city="area" @cityPicker='cityPicker'></uni-citys>
						<!-- <text class="text-grey text-sm" @tap="openAddres(0)">{{area}}</text> -->
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text class="text-grey">请选择要对比的目标省市</text>
					</view>
					<view class="action">
						<!-- <uni-citys :city="areaCompare" @cityPicker='otherCityPicker'></uni-citys> -->
						<uni-citys :key="cityId" :defaultCity="[0,0]" :city="areaCompare" @cityPicker='otherCityPicker'></uni-citys>
						<!-- <text class="text-grey text-sm" @tap="openAddres(1)">{{areaCompare}}</text> -->
					</view>
				</view>
				<view class="text-sm">
					说明: 该工具用于测算各地区的最低社保缴费差异，选择省市后，系统默认的城市是该省的省会城市，测算的社保数据为该省的省会城市数据。
				</view>
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round" @tap="goPage('/pages/tabbar/company/socialAreaResult')">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
	import uniCitys from '@/components/citys-limit/uni-limitCitys.vue';
	export default {
		components: {
			uniCitys
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				areaCompare:'深圳',
				area:'',
				areaIndex:0,
        cityId:1,
				resultData:'',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,

			};
		},
		methods: {
			changeMulti(e){
				console.log(e);
			},
			goPage(page){
				// let uId = uni.getStorageSync('userId');
				let uId =1
				if(uId>"0"&&uId!=undefined){
					let errMsg = '';
					if(this.areaCompare=='')errMsg = '请输入对比城市';
					if(this.area=='')errMsg = '请选择当前城市';
					if(errMsg){
						uni.showToast({
							title:errMsg,
							icon:'none',
						});
						return;
					}

					console.log(this.area + this.areaCompare);
					uni.setStorageSync('socialParam',{now_city:this.area,compare_city:this.areaCompare});
					uni.navigateTo({
						url: page
					})
					return;
				}


			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			openAddres(index) {
				this.areaIndex = index;
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				// this.pickerText = JSON.stringify(e);
				let labelArr = e.labelArr;
				let city = labelArr[1]=="市辖区"?labelArr[0]:labelArr[1];
				if(this.areaIndex>0){
					this.areaCompare = city;
				}
				else{
					this.area = city;
				}
				// this.area[this.areaIndex] = city;
				// console.log(e )
			},
			async getResult(){
				let param = {
					now_city:this.area[0],
					compare_city:this.area[1],
					};

				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'wx/elseSocial', //可以直接放链接(将不启用全局定义域名)
					param,
				);
				this.resultData = data;
				console.log(data);
				// this.modalName = 'gridModal';
			},
			cityPicker(val){
				 this.area=val.city
			},
			otherCityPicker(val){
				console.log(val);
				 this.areaCompare=val.city
			},

		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #F6F6F6;


	}
	.cu-btn{
		height: 80rpx;
		width: 80%;
		margin: 0 10%;
		color: #fff;
    background: linear-gradient(135deg, #4CFECE 0%, #4CA5FE 100%);
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 10px;
		background: transparent;
		margin-left: -10px;
		padding: 0;
	}
	.cu-list>.text-sm{
		padding: 10px 15px;
		text-align: justify;
		font-family: '宋体';
	}
	.cu-list>.text-bold{
		border-bottom: 1rpx solid #ddd;
	}
	.cu-list{
		/* height: 375px; */
		background: #FFFFFF;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 1;
		border-radius: 10px;
		margin: 20px 10px;
	}
	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
